<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.xnnumberturner-cont{*/
        /*    position: relative;*/
        /*    position: relative;*/
        /*    display: grid;*/
        /*    !*grid-gap: 10px;*!*/
        /*    !*grid-template-columns: repeat(auto-fill,30px);*!*/
        /*}*/
        /*.xnnumber-item{*/
        /*    position: relative;*/
        /*    width: 20px;*/
        /*    height: 40px;*/
        /*    line-height: 40px;*/
        /*    font-size: 16px;*/
        /*    display: inline-block;*/
        /*    background: #acaacc;*/
        /*    text-align: center;*/
        /*    overflow: hidden;*/
        /*}*/
        /*.xnnumber-inner{*/
        /*    transition: all 0.8s ease-out;*/
        /*}*/

    </style>
</head>
<body>
    <div class="xnnumberturner-cont">
        <div class="xnnumber-item">
            <div class="xnnumber-inner">
                <div>0</div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
            </div>
        </div>
        <div class="xnnumber-item">
            <div class="xnnumber-inner">
                <div>0</div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
            </div>
        </div>
        <div class="xnnumber-item">
            <div class="xnnumber-inner">
                <div>0</div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
            </div>
        </div>
        <div class="xnnumber-item">
            <div class="xnnumber-inner">
                <div>0</div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
            </div>
        </div>
    </div>
    <div id="refresh">刷新</div>
</body>
<script type="module">
    // import XnNumberTurner from './src/xnnumberturner.js'
    let xnnumber=new XnNumberTurner(document.querySelector('.xnnumberturner-cont'),'623,4',{})
    document.querySelector('#refresh').addEventListener('click',()=>{
        xnnumber.changeNumber('888901,109')
    })
</script>
</html>
